<template>
  <div class="main">
    <div class="title">
      <div class="blue"></div>
      <div class="name">主要地图水流量</div>
    </div>
    <div ref="chart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const upstreamData = [160, 200, 220, 280, 210, 350];
      const downstreamData = [40, 120, 100, 110, 140, 70];

      // 新增年份生成逻辑
      const currentYear = new Date().getFullYear();
      const years = Array.from({ length: 6 }, (_, i) => `${currentYear - 5 + i}`);

      const averageData = upstreamData.map((up, index) => (up + downstreamData[index]) / 2);

      const option = {
        xAxis: {
          type: 'category',
          data: years,  // 替换原有静态年份数据
          axisLabel: { color: '#fff' },
          axisLine: {
            lineStyle: {
              color: '#fff',
              width: 1
            }
          }
        },
        yAxis: {
          type: 'value',
          name: 'm³',
          nameTextStyle: {
            color: '#fff',
            fontSize: 12,
            align: 'right'
          },
          axisLabel: {
            color: '#fff',
            margin: 8 // 增加标签边距
          },
          splitLine: {
            lineStyle: {
              color: '#3a618a',
              width: 1, // 明确指定线宽
              type: 'dashed' // 改为虚线更明显
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
              width: 2 // 加粗轴线
            }
          },
          min: 0,
          max: 400,
          interval: 100
        },
        series: [
          {
            name: '上游流速',
            type: 'line',
            data: upstreamData,
            smooth: true,
            itemStyle: { color: '#d8b72a' }
          },
          {
            name: '下游流速',
            type: 'line',
            data: downstreamData,
            smooth: true,
            itemStyle: { color: '#0be3ff' }
          },
          {
            name: '平均流速',
            type: 'line',
            data: averageData,
            smooth: true,
            itemStyle: { color: '#16f892' }
          }
        ],
        grid: {
          top: '25%',  // 调整顶部间距为图例留出空间
          bottom: '15%',
          containLabel: true
        },
        legend: {  // 新增图例配置
          top: '8%',
          right: '10%',
          itemGap: 20,
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          data: ['上游流速', '下游流速', '平均流速']
        },
        grid: {
          top: '20%',  // 同步上移图表主体
          bottom: '15%',
          containLabel: true
        },
        legend: {
          top: '1%',   // 从8%上调至3%
          right: '10%',
          itemGap: 20,
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          data: ['上游流速', '下游流速', '平均流速']
        },
        grid: {
          top: '15%',
          bottom: '15%',
          containLabel: true
        }
      };
      chart.setOption(option);
    }
  }
};
</script>

<style scoped>
.main {
  height: 35vh;
  width: 25%;
  min-width: 300px; /* 新增最小宽度限制 */
  background-color: #0d2b55;
  position: absolute;
  right: 1%;       /* 百分比单位更适配不同分辨率 */
  top: 64vh;
  margin-top: 5px;
}

.main .title {
  height: 11%;
  width: 100%;
  margin-top: 5px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blue {
  background-color: #2997e4;
  width: 1%;
  height: 25px;
}

.name {
  flex: 1;
  font-size: 17px;
  color: white;
}

/* 新增图表样式 */
.chart-container {
  height: 85%;
  width: 100%;
  overflow: hidden;
}
</style>
